*{
    margin: 0;
    padding: 0;
}

@total-width:750;

.w{
    width: 693/40rem;
    margin: 0px 10px ;
}

//设置根元素
html{
    // 设置rem的比值
    font-size: (100vw/@total-width) * 40;
    background-color: #eff0f4;
}

a{
    text-decoration: none;
}

//设置头部header
.top-bar:extend(.w){
    //设置弹性容器
    display: flex;
    // 设置高度
    height: (175/40rem);
    line-height: (175/40rem);
    // 设置对齐方式
    justify-content: space-between;
    // 设置辅轴对齐方式
    align-items: center;

    h1{
        line-height: (175/40rem);
    }
}

a{
    color: #24253d;
    font-size: (50/40rem);
    i{
        color: #999;
        font-size: (40/40rem);
    }
}

//设置banner
.banner:extend(.w){
    img{
        width: 100%;
    }
}

// 设置中间菜单
.menu:extend(.w){
    //确定元素高度
    height: (329/40rem);
    // 设置弹性元素
    display: flex;
    //设置换行
    flex-flow: row wrap;
    //设置对齐方式
    justify-content: space-between;
    //设置辅轴对齐方式
    align-content: space-evenly;
    //确定框的大小
    a{
        width: (327/40rem);
        height: (104/40rem);
        line-height: (104/40rem);
        color: white;
        border-radius: (10/40rem);
        
        i{
            margin: 0 (20/40rem) 0 (28/40rem);
        }
    }

    .course{
        background-color: #f97053;
    }
    .star{
        background-color:#cd6efe; 
    }
    .sub{
        background-color:#fe4479 ;
    }
    .download{
        background-color: #1bc4fb;
    }
}

//设置课程列表
.course-list:extend(.w){
    height: (394/40rem);
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    margin-bottom: (46/40rem);
    
    .title{
        display: flex;
        //主轴的空间
        justify-content: space-between;
        //辅轴的对齐方式
        align-items: center;
     h2{
            color: #24253d;
            font-size: (33/40rem);
            border-left: 2px solid #3a84ff;
            padding-left: 4px;
    }
        a{
            font-size: (28/40rem);
            color: #656565;
        }
    } 
    }

// 设置列表项

.item-list{
    width: (720/40rem);
    display: flex;
    overflow: auto;
    align-items: center;
    padding: 2px;
}
.item{
    flex: none;
    box-sizing: border-box;
    width: (320/40rem);
    height: (324/40rem);
    padding: 0 (24/40rem);
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    border-radius: 5px;
    display: flex;
    flex-flow: column;
    justify-content: space-evenly;
    margin-right: (24/40rem);
    //设置图片宽度
    img{
        width: 100%;
        vertical-align: top;
    }
    //课程标题
    .course-title{
        font-size: (32/40rem);
        color: #24253d;
    }
    //设置用户容器
    .user-info{
        display: flex;
        align-items: center;
    }
    // 头像
    .avatar{
        width: (42/40rem);
        height: (42/40rem); 

    }
    // 用户的昵称
    .nickname{
        font-size: (24/40rem);
        color: #969393;
        margin-left: 6px;
    }
}
